<template>
  <div class="p-6 max-w-4xl mx-auto">
    <!-- 连接设置 -->
    <el-card shadow="hover" class="mb-6 con-set">
      <template #header>
        <div class="font-bold">TCP 连接配置</div>
      </template>
      <el-form :model="form" label-width="140px" size="large">
        <el-form-item label="服务器地址">
          <el-input v-model="form.host" placeholder="如：192.168.11.100" style="width: 200px" />
        </el-form-item>
        <el-form-item label="端口">
          <el-input-number v-model="form.port" :min="1" :max="65535" style="width: 200px" />
        </el-form-item>

        <el-form-item>
          <el-button
              type="primary"
              :icon="Switch"
              @click="connect"
              :loading="connectionStatus === 'connecting'"
          >
            {{ connectionStatus === 'connecting' ? '连接中...' : '连接' }}
          </el-button>
          <el-button @click="disconnect" class="ml-2">断开</el-button>
        </el-form-item>

        <el-form-item label="连接状态">
          <el-tag :type="connectionStatus === 'connected' ? 'success' : 'danger'">
            {{ connectionStatus === 'connected' ? '已连接' : '未连接' }}
          </el-tag>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 请求参数 -->
    <el-card shadow="hover" class="mb-6" :disabled="connectionStatus !== 'connected'">
      <template #header>
        <div class="font-bold">请求参数</div>
      </template>
      <el-form :model="form" label-width="140px" size="default">

        <el-form-item>
          <el-button
              type="success"
              :icon="Download"
              @click="download"
              :disabled="connectionStatus !== 'connected'"
              :loading="downloadLoading"
            >
              {{ downloadLoading ? downloadLoadingText : '下载更新任务列表和配置文件' }}
          </el-button>
          <span v-if="downloadLoading && downloadLoadingText.includes('配置文件') && currentDownloadingTaskId" class="ml-2 text-success">
            当前下载的任务配置文件ID为{{ currentDownloadingTaskId }}
          </span>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 下载的文件列表 -->
    <el-card shadow="never" class="mb-6" v-if="displayFiles.length > 0">
      <template #header>
        <div class="font-bold">任务列表及配置文件</div>
      </template>
      <el-table :data="displayFiles" style="width: 100%; max-height: 500px; overflow-y: auto;">
        <el-table-column prop="fileName" label="文件名称" width="300" />
        <el-table-column prop="updateTime" label="更新时间" width="250" />
        <el-table-column prop="fileType" label="文件类型" width="150" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import {
  ElInput,ElButton,ElCard,ElForm,ElFormItem,ElTag,ElMessage, ElTable, ElTableColumn, ElMessageBox
} from 'element-plus';
import { Switch, Download } from '@element-plus/icons-vue';

const connectionStatus = ref('disconnected'); // disconnected, connecting, connected
const form = ref({
  host: '192.168.11.100',
  port: 8118
});

const downloadLoading = ref(false);
const downloadLoadingText = ref('');
const files = ref([]); // 存储下载的文件列表
const displayFiles = ref([]); // 用于显示的文件列表
const currentDownloadingTaskId = ref(null); // 当前正在下载的任务ID

// 连接控制
const connect = async () => {
  try {
    connectionStatus.value = 'connecting';
    const res = await window.electronAPI.tcpConnect({
      host: form.value.host,
      port: form.value.port
    });
    if (res.success) {
      ElMessage.success(res.message);
    } else {
      ElMessage.error(res.message);
    }
  } catch (e) {
    console.error('连接错误:', e);
    ElMessage.error(e.message || '连接失败');
    connectionStatus.value = 'disconnected';
  } finally {
    if (connectionStatus.value === 'connecting') {
      connectionStatus.value = 'disconnected';
    }
  }
};

const disconnect = async () => {
  await window.electronAPI.tcpDisconnect();
  ElMessage.info('已断开连接');
};

// 从文件夹获取文件列表
const getFilesFromDirectory = async () => {
  try {
    const res = await window.electronAPI.getFilesFromDirectory();
    if (res.success) {
      files.value = res.files || [];
      // 处理文件列表，添加格式化的更新时间和文件类型
      const processedFiles = files.value.map(file => {
        // 格式化更新时间
        const updateTime = new Date(file.mtime).toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit'
        });
        
        // 判断文件类型
        let fileType = '未知文件';
        if (file.fileName.includes('tasklist')) {
          fileType = '任务列表';
        } else {
          fileType = '配置文件';
        }
        
        return {
          ...file,
          updateTime,
          fileType,
          // 保留原始的mtime用于排序
          rawMtime: new Date(file.mtime).getTime()
        };
      });
      
      // 分离任务列表文件和配置文件
      const taskListFiles = processedFiles.filter(file => file.fileType === '任务列表');
      const configFiles = processedFiles.filter(file => file.fileType === '配置文件');
      
      // 配置文件按更新时间递减排序
      configFiles.sort((a, b) => b.rawMtime - a.rawMtime);
      
      // 合并排序后的文件列表：任务列表在前，配置文件在后
      displayFiles.value = [...taskListFiles, ...configFiles];
      console.log('从文件夹获取的文件列表:', files.value);
    } else {
      console.error('获取文件列表失败:', res.message);
      ElMessage.error('获取文件列表失败');
    }
  } catch (e) {
    console.error('获取文件列表异常:', e);
    ElMessage.error('获取文件列表异常');
  }
};

const download = async () => {
  if (connectionStatus.value !== 'connected') {
    ElMessage.warning('请先连接服务器');
    return;
  }

  // 重置当前下载任务ID
  currentDownloadingTaskId.value = null;
  
  try {
    // 设置loading状态
    downloadLoading.value = true;
    downloadLoadingText.value = '正在下载任务列表';
    
    // 为下载操作添加超时处理，确保一个文件超时后能继续下一个
    const downloadWithTimeout = async (options, timeout = 30000) => {
      console.log(`准备下载 - 命令类型: ${options.cmdType === 4 ? '任务列表' : '任务配置文件'}, 任务ID: ${options.taskID}, 超时设置: ${timeout}ms`);
      
      const timeoutPromise = new Promise((_, reject) => {
        setTimeout(() => reject(new Error(`请求超时: ${options.cmdType === 4 ? '任务列表' : '任务配置文件'}`)), timeout);
      });
      
      try {
        // 使用Promise.race实现超时控制
        const result = await Promise.race([
          window.electronAPI.tcpDownloadConfig(options),
          timeoutPromise
        ]);
        console.log(`下载完成 - 命令类型: ${options.cmdType === 4 ? '任务列表' : '任务配置文件'}, 结果:`, result);
        return result;
      } catch (error) {
        console.error(`下载异常 - 命令类型: ${options.cmdType === 4 ? '任务列表' : '任务配置文件'}, 错误:`, error);
        // 对于任务配置文件，使用自定义格式的错误提示
        if (options.cmdType !== 4 && options.taskID) {
          ElMessage({ message: `任务id为${options.taskID}的配置文件下载失败`, type: 'error', duration: 5000 });
        } else {
          ElMessage.warning(error.message || '下载失败，但将继续尝试其他文件');
        }
        return { success: false, message: error.message };
      }
    };
    
    // 逐个下载任务配置文件，确保每个文件都有独立的超时处理
    const downloadTaskConfigsOneByOne = async (taskIds) => {
      let downloadedCount = 0;
      let failedCount = 0;
      
      console.log(`开始逐个下载任务配置文件，总任务数: ${taskIds.length}`);
      
      for (let i = 0; i < taskIds.length; i++) {
        const taskId = taskIds[i];
        downloadLoadingText.value = `正在下载任务 ${i + 1}/${taskIds.length} 的配置文件`;
        console.log(`开始下载任务 ${i + 1}/${taskIds.length}，任务ID: ${taskId}`);
        
        try {
          // 更新当前下载的任务ID
          currentDownloadingTaskId.value = taskId;
          
          const taskRes = await downloadWithTimeout({
            cmdType: 2,
            taskID: taskId,
          });
          
          if (taskRes.success) {
            downloadedCount++;
            console.log(`任务 ${taskId} 配置文件下载成功，已成功: ${downloadedCount}/${taskIds.length}`);
            // 每个任务下载成功后立即更新文件列表
            await getFilesFromDirectory();
          } else {
            failedCount++;
            console.warn(`任务 ${taskId} 配置文件下载失败:`, taskRes.message || '未知错误');
            // 任务失败时也显示5秒的错误提示
            ElMessage({ message: `任务id为${taskId}的配置文件下载失败`, type: 'error', duration: 5000 });
            // 即使当前任务失败，也继续尝试下一个任务
          }
        } catch (error) {
          failedCount++;
          console.error(`任务 ${taskId} 配置文件下载发生异常:`, error);
          // 显示5秒的错误提示
          ElMessage({ message: `任务id为${taskId}的配置文件下载失败`, type: 'error', duration: 5000 });
        } finally {
          // 单个任务下载完成后清除当前下载的任务ID
          if (i === taskIds.length - 1) {
            currentDownloadingTaskId.value = null;
          }
        }
      }
      
      console.log(`所有任务配置文件下载完成，成功: ${downloadedCount}/${taskIds.length}，失败: ${failedCount}`);
      return { downloadedCount, failedCount, totalCount: taskIds.length };
    };
    
    // 下载任务列表
    const res = await downloadWithTimeout({
      cmdType: 4,
      taskID: 1,
    });
    
    if (res.success) {
      ElMessage.success(`文件 "${res.fileName}" 下载成功！`);
      // 保存一个文件后，立即从文件夹获取最新文件列表
      await getFilesFromDirectory();
    }
    
    // 直接从下载的响应中获取任务ID列表，而不是从文件中读取
    let waitDownloadTaskIdList = [];
    if (res.success && res.taskIdList && Array.isArray(res.taskIdList) && res.taskIdList.length > 0) {
      waitDownloadTaskIdList = res.taskIdList;
      console.log('从下载响应中获取的任务列表:', waitDownloadTaskIdList);
    } else {
      console.log('下载响应中没有任务列表或任务列表为空');
    }
    
    // 下载任务配置文件
    if (waitDownloadTaskIdList.length > 0) {
      // 使用逐个下载策略
      const result = await downloadTaskConfigsOneByOne(waitDownloadTaskIdList);
      
      console.log('任务配置文件逐个下载总结果:', result);
      if (result.downloadedCount > 0) {
        console.log(`成功下载 ${result.downloadedCount}/${result.totalCount} 个任务配置文件`);
        ElMessage.success(`成功下载 ${result.downloadedCount}/${result.totalCount} 个任务配置文件`);
        // 最终更新一次文件列表
        await getFilesFromDirectory();
      } else {
        console.warn('所有任务配置文件下载失败');
        ElMessage.warning('所有任务配置文件下载失败');
      }
      
      // 最终完成后显示统计对话框
      ElMessageBox.alert(
        `任务列表文件下载${res.success ? '成功' : '失败'}，总共${result.totalCount}个任务配置文件，下载成功${result.downloadedCount}个，下载失败${result.failedCount}个`,
        '下载完成',
        {
          confirmButtonText: '确定',
          type: res.success ? 'success' : 'warning'
        }
      );
    } else {
      // 如果没有需要下载的任务配置文件，也显示对话框
      ElMessageBox.alert(
        `任务列表文件下载${res.success ? '成功' : '失败'}，没有需要下载的任务配置文件`,
        '下载完成',
        {
          confirmButtonText: '确定',
          type: res.success ? 'success' : 'warning'
        }
      );
    }
  } catch (e) {
    ElMessage.error(e.message || '请求失败');
  } finally {
    // 无论成功失败，都关闭loading并重置当前下载的任务ID
    downloadLoading.value = false;
    downloadLoadingText.value = '';
    currentDownloadingTaskId.value = null;
  }
};

// 监听状态变化
const handleStatusChange = (status) => {
  connectionStatus.value = status;
};

// 日志处理函数，打印到控制台并在文件超时时显示提示
const handleLog = (msg) => {
  const timestamp = new Date().toLocaleTimeString();
  const logMessage = `[${timestamp}] ${msg}`;
  
  // 只打印到浏览器控制台，不添加到页面显示
  console.log('TCP日志:', logMessage);
  
  // 当检测到超时消息时，在页面上显示提示
  if (msg.includes('请求超时')) {
    ElMessage.warning(msg);
  }
};

onMounted(() => {
  window.electronAPI.tcpOnStatusChange(handleStatusChange);
  window.electronAPI.tcpOnLog(handleLog);
  
  // 页面加载时从文件夹获取文件列表
  getFilesFromDirectory();
});

onUnmounted(() => {
  window.electronAPI.tcpOffStatusChange();
  window.electronAPI.tcpOffLog();
});
</script>

<style scoped>
.con-set,.log-panel{
  float: left;
    width: calc(50% - 20px);
    margin-right: 10px;
}

/* TCP日志容器样式 */
.tcp-log-container {
  background-color: #f5f5f5;
  padding: 12px;
  border-radius: 4px;
  font-size: 14px;
  max-height: 380px; /* 设置最大高度 */
  overflow-y: auto; /* 纵向溢出时显示滚动条 */
  white-space: pre-wrap; /* 保留空白和换行 */
  word-break: break-all; /* 长单词自动换行 */
}

/* 滚动条样式 */
.tcp-log-container::-webkit-scrollbar {
  width: 8px;
}

.tcp-log-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.tcp-log-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.tcp-log-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>